首要目標：製作一個icon，並且使用計時器讓我們計算工作時間，而且在每分鐘或暫停等動作的時候改變圖示的文字

好的首先，我就隨便用XD做一個很簡便的番茄icon，然後把他放到我們的manifest上吧

然後我們現在需要用的計時器是 chrome.alarm，依照官方文獻顯示需要alarms權限，
而且我們不需要浮動頁面，所以browser_action只需要title以及icon就好了

manifest.json

{
    "manifest_version": 2,
    "name": "Pomodoro",
    "version": "1.0.0",
    "description": "This is a Pomodoro Technique chrome extension",
    "icons": {
        "48": "icons/my48.png"
    },
    "browser_action":{
        "default_icon": "icons/my48.png",
        "default_title": "Pomodoro"
    },
    "options_page": "optionPage/option.html",
    "content_scripts": [
        {
          "matches": ["*://*.youtube.com/*"],
          "js": ["content_script/base_script.js"]
        }
      ],
      "background" :{
          "scripts" :["background/bg.js"],
          "persistent" : false
      },
      "permissions": [
        "activeTab", 
        "alarms"
      ]
}

接下來商業邏輯就寫在後台腳本裡，我們需要一個主控台來管理時間與工作狀態，那就把靜態資料先整理進來

background/bg.js

    //每次工作時間
    this.workTime = 25;
    //每次小休息時間
    this.restTime = 5;
    //每次大休息時間
    this.bigRestTime = 15;
    //時間類型
    this.timer = "work"; // 'work' or 'rest'
    //時鐘是否運行中
    this.isRun = false;

接下來我們需要捕捉點選icon的事件，所以使用chrome.browserAction的onClicked事件，
註：此事件在browser_action有default_popup時無法使用

    //當點擊icon時觸發事件
    chrome.browserAction.onClicked.addListener()

然後我們要啟動與停止時鐘的事件

  //開始時鐘
  start() {
    chrome.alarms.create(ALARM_NAME, {
      delayInMinutes: 1,
      periodInMinutes: 1
    });
  }
  //暫停時鐘
  stop() {
    chrome.alarms.clear(ALARM_NAME)
  }

還有時鐘每個頻率會觸發的事件

    //當時鐘運轉時呼叫事件
    chrome.alarms.onAlarm.addListener(callback)

把全部混起來就是

background/bg.js

//時鐘名稱
const ALARM_NAME = "pomodoro";

class Pomodoro {
  constructor() {
    //每次工作時間
    this.workTime = 25;
    //每次小休息時間
    this.restTime = 5;
    //每次大休息時間
    this.bigRestTime = 15;
    //時間類型
    this.timer = "work"; // 'work' or 'rest'
    this.isRun = false;

    //當點擊icon時觸發事件
    chrome.browserAction.onClicked.addListener(()=>{this.handleIconClick()})
    //當時鐘運轉時呼叫事件
    chrome.alarms.onAlarm.addListener(()=>{this.handleAlarm()})
    //先預設第一次的icon文字
    chrome.browserAction.setBadgeText({ text: '-'})
  }

  //點擊事件
  handleIconClick() {
    //正在執行就停止
    if (this.isRun) {
      chrome.browserAction.setBadgeText({ text: '-' })
      this.stop()
    }
    //開始
    else {
      this.start()
      chrome.browserAction.setBadgeText({ text: String(this.workTime) })
    }
    this.isRun = !this.isRun;
  }

  //時鐘事件
  handleAlarm() {
    if(this.workTime - 1 < 1){
        this.stop()
    }
    if (this.timer === "work") {
      this.workTime--
      chrome.browserAction.setBadgeText({ text: String(this.workTime) })
    }
  }

  //開始時鐘
  start() {
    chrome.alarms.create(ALARM_NAME, {
      delayInMinutes: 1,
      periodInMinutes: 1
    });
    chrome.alarms.getAll(function(array){
        console.log(array);
    })
  }
  //暫停時鐘
  stop() {
    chrome.alarms.clear(ALARM_NAME)
  }

}

var pomodoro = new Pomodoro();

所以載入extension以後就會長這樣

如果點擊第一次

過一分鐘以後再看一次

如果點擊第二次就會回減字號

那今天就先把顯示與時間先處理好了，其他的我們再接再厲！